<template>
  <div>
    <div class="navbera">
      <van-nav-bar title="城市列表" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="mian11">
      <!-- 城市列表 -->
      <van-index-bar :index-list="citrlistBB" highlight-color="#pink">
        <song
          v-for="(itms, index) in citrlistBB"
          :key="index"
          :itzi="itms"
          :list="citrlistAA"
          :renmen="cityinHeat"
          :dang="hangzhou"
          @chengshi="chengname"
        ></song>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import song from './compoten/song.vue'
import { cityinApi, cityinHeatApi } from '@/api'
export default {
  components: { song },
  name: 'ctri',
  data() {
    return {
      citrlist: [],
      cityinHeat: [],
      hangzhou: [
        {
          label: '上海',
          value: 'AREA|dbf46d32-7e76-1196'
        }
      ]
    }
  },
  computed: {
    citrlistAA() {
      const aa = (id) => this.cityinHeat.find((itms) => !!(itms.value === id))
      return this.citrlist.filter((itms) => !aa(itms.value))
    },
    //首字母
    citrlistBB() {
      return [
        '#',
        '热',
        ...new Set(
          this.citrlist.map((itms) => itms.short[0].toUpperCase()).sort()
        )
      ]
    }
  },
  //获取城市列表
  async created() {
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    })
    const { data } = await cityinApi(1)
    const aa = await cityinHeatApi()
    this.cityinHeat = aa.data.body
    this.citrlist = data.body
    this.$toast.success('获取成功')
  },
  //点击返回跳转
  methods: {
    onClickLeft() {
      const a = this.$route.query.id
      if (a === '1') {
        this.$router.push({ path: '/home ' })
      } else if (a === '0') {
        this.$router.push({ path: '/home/sertch' })
      }
    },
    //点击城市跳转传参
    chengname(b) {
      const a = this.$route.query.id
      if (a === '1') {
        this.$router.push({
          path: '/home ',
          query: b
        })
      } else if (a === '0') {
        this.$router.push({
          path: '/home/sertch',
          query: b
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
:deep(.navbera) {
  .van-hairline--bottom {
    background-color: #21b97a;
    .van-icon-arrow-left {
      color: #fff;
    }
    .van-nav-bar__title {
      color: #fff;
    }
  }
}
:deep(.mian11) {
  .van-index-bar__index--active {
    background-color: #21b97a !important;
    width: unset;
    border-radius: 50%;
    color: #fff;
  }
  .van-index-bar__index {
    padding: 2px;
    margin-right: 20px;
  }
}
</style>
